<script setup>
import { defineAsyncComponent } from 'vue';

// 使用异步组件导入，避免循环依赖问题
const UserPersonalStats = defineAsyncComponent(() => import("@/components/charts/UserPersonalStats.vue"));
const UserPersonalReserve = defineAsyncComponent(() => import("@/components/charts/UserPersonalReserve.vue"));
const UserHotCourse = defineAsyncComponent(() => import("@/components/charts/UserHotCourse.vue"));
</script>

<template>
    <div class="container">
        <el-row>
            <el-col :span="15">
                <el-row>
                    <el-col :span="24">
                        <div style="width: 100%; height: 200px">
                            <UserPersonalStats></UserPersonalStats>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <div style="width: 100%; height: 400px">
                            <UserPersonalReserve></UserPersonalReserve>
                        </div>
                    </el-col>
                </el-row>
            </el-col>

            <el-col :span="9">
                <el-row>
                    <el-col :span="24">
                        <div style="width: 100%; height: 600px">
                            <UserHotCourse></UserHotCourse>
                        </div>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
    </div>
</template>

<style scoped>
.container {
    min-height: 100%;
    background-color: #F5F5F5;
}

.container > .el-row {
    padding: 15px;
}

.title {
    text-align: center;
    color: #1A232A;
    font-size: 36px;
}

.el-col .el-col {
    background-color: #FFF;
    border-radius: 5px;
}

.el-row .el-row {
    margin-bottom: 15px;
    margin-right: 15px;
}
</style>